<template>
  <div>
   <el-descriptions size='medium' column='4'>
    <el-descriptions-item label="【题型】">
      <template>
        <div v-if="data.questionType==='1'">单选</div>
        <div v-else-if="data.questionType==='2'">多选</div>
        <div v-else>简答</div>
      </template>
    </el-descriptions-item>
    <el-descriptions-item label="【编号】">{{data.id}}</el-descriptions-item>
    <el-descriptions-item label="【难度】">
      <template>
        <div v-if="data.difficulty==='1'">简单</div>
        <div v-else-if="data.difficulty==='2'">一般</div>
        <div v-else>困难</div>
      </template>
    </el-descriptions-item>
    <el-descriptions-item label="【标签】">{{data.tags}}</el-descriptions-item>
    <el-descriptions-item label="【学科】">{{data.subjectName}}</el-descriptions-item>
    <el-descriptions-item label="【目录】">{{data.directoryName}}</el-descriptions-item>
    <el-descriptions-item label="【方向】">{{data.direction}}</el-descriptions-item>
  </el-descriptions>
  <el-divider el-divider></el-divider>
  <el-descriptions size='medium' column='4'>
    <el-descriptions-item label="【题干】"></el-descriptions-item>
  </el-descriptions>
  <p class="problem">{{data.question|html2Text}}</p>
  <p>
    <template>
      <span v-if="data.questionType==='1'">单选</span>
      <span v-else-if="data.questionType==='2'">多选</span>
      <span v-else>简答</span>
    </template>
    <span>题 选项：（以下选中的选项为正确答案）</span>
  </p>
  <el-checkbox  v-for="item in data.options" :checked="!item.isRight" :key="item.id" :style="{display:'block'}">
      {{item.title}}
  </el-checkbox>
  <el-divider el-divider></el-divider>
  <el-descriptions size='medium' column='4'>
    <el-descriptions-item label="【参考答案】">
      <el-button type="danger" size='small' @click="Videoo=!Videoo">视频答案预览</el-button>
      <div v-if="Videoo">
      <video width="400" height="300" controls>
         <source :src="data.videoURL">
      </video>
    </div>
    </el-descriptions-item>
  </el-descriptions>
  <el-divider el-divider></el-divider>
  <el-descriptions size='medium' column='4'>
    <el-descriptions-item label="【答案解析】">{{data.remarks}}</el-descriptions-item>
  </el-descriptions>
  <el-divider el-divider></el-divider>
  <el-descriptions size='medium' column='4'>
    <el-descriptions-item label="【题目备注】">{{data.remarks}}</el-descriptions-item>
  </el-descriptions>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      checked: [],
      Videoo: false
    }
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
 /deep/.el-divider{
   height: 1.1px;
   background-color:#9a9a9a;
   margin: 5px 0;
 }
 .problem{
   margin-top: 0;
 }
 .el-checkbox{
   margin: 10px 0;
 }
 /deep/.el-descriptions{
   /deep/.el-descriptions-item{
   padding: 0 !important;
   padding: 8px 0 !important;
  }
 }
 .problem{
  color: #0000ff;
 }
 .el-button{
   width: 120px;
 }
 /deep/.el-descriptions-item__container{
   line-height: 30px !important;
 }

</style>
